<template>
    <div class='pos-con'>
        <div class="header">
            <div class='pos-top'>
                <span class='fa fa-chevron-left' @click='closePos'></span>
                <h3>选择地址</h3>
            </div>
            <form class='pos-form'>
                <input type="text" placeholder='请输入地址' autofocus='autofocus' v-model.trim="inpVal">
            </form>
        </div>
        <div class='pos-content'>
            <div 
            class='pos-item' 
            v-for='item in posList' 
            @click='doSubPos({name:item.name,latitude:item.latitude,longitude:item.longitude})'
            >
                <p class='pos-name'>{{item.name}}</p>
                <p class='pos-address'>{{item.address}}</p>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        data:function(){
            return {
                inpVal:""
            }
        },
        props:['posList'],
        methods:{
            closePos:function(){
                this.$emit('closePos')
            },
            doSubPos:function(pos){
                this.closePos()
                this.$emit('subPos',pos)
            },
        },
        watch:{
            inpVal:function(){
                if(this.inpVal){
                    this.$emit('reqPos',this.inpVal)
                }  
            }
        }
    }
</script>
<style scoped>
    h3{
        margin: 0;
    }
    .pos-con{
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        z-index:2;
        background-color: #fff;
    }
    .header{
        /*height: 100px;*/
        background-color: #0096ff;
        color:#fff;
    }
    .pos-top{
        display: flex;
        padding: 10px;
        line-height: 20px;
    }
    .pos-top span{
        font-size: 20px;
    }
    .pos-top h3{
        font-size: 20px;
        font-weight: 200;
        padding: 0 120px;
        text-align: center;
    }
    .pos-form{
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }
    .pos-form input{
        width: 90%;
        height: 30px;
        border-radius: 30px;
        border: 1px solid #fff;
        padding: 0 10px;
    }
    .pos-content{
        height: calc(100vh - 92px);
        overflow: scroll;
    }
    .pos-item{
        height: 50px;
        border-bottom: 1px solid #eee; 
        padding: 10px;
    }
    .pos-name{
        color: #333;
        font-weight: 700;
        font-size: 14px;
    }
    .pos-address{
        margin-top: 1px;
        color:#999;
        font-size: 12px;
    }
</style>